<!--
 * @Author: jswang
 * @Date: 2021-08-03 16:34:16
 * @LastEditTime: 2021-08-04 11:11:02
-->
<template>
  <el-dialog
    title="新增员工"
    :visible="dialogVisible"
    @close="btnCancel">
    <el-form  label-width="120px" :model="formData" :rules="formDataRules" ref="formDataRef">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入姓名" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号码" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker type="date"  placeholder="请选择入职时间" v-model="formData.timeOfEntry" style="width:50%"></el-date-picker>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请选择" style="width:50%">
          <el-option v-for="item in EmployeesEnum.hireType" :key="item.value" :value="item.id" :label="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="formData.workNumber" placeholder="请输入工号" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="formData.departmentName" placeholder="请选择部门" @focus="getDepartments" style="width:50%" ></el-input>
        <el-tree
          :data="treeData"
          :props="treeDataProps"
          :default-expand-all="true"
          v-if="showTree"
          v-loading="loading"
          @node-click="selectNode">
        </el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker  type="date" placeholder="请选择时间" v-model="formData.correctionTime" style="width:50%"></el-date-picker>
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import {getDepartments} from '@/api/departments'
import {tranListToTreeData} from '@/utils'
import EmployeesEnum from '@/api/constant/employees'
import {addEmployee} from '@/api/employees'
export default {
  props:{
    dialogVisible:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      EmployeesEnum,
      treeData:[], //接受属性结构数据
      treeDataProps:{
        label:'name',
        
      },
      showTree:false, //默认不显示属性结构
      loading:false,//加上进度条
      formData:{
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      formDataRules:{
        username:[
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          {min: 1, max: 4, message: '用户姓名为1-4位',trigger:'blur'}
        ],
        mobile:[
          {required:true,message:'手机号码不能为空',trigger:'blur'},
          // pattern 正则表达式,如果满足,通过校验,不满足条件,不通过
          {pattern:/^1[3-9]\d{9}$/,message:'手机号码格式不正确',trigger:'blur'}
        ],
        formOfEmployment:[
          {required:true,message:'聘用形式不能为空',trigger:'blur'}
        ],
        workNumber:[
          {required:true,message:'工号不能为空',trigger:'blur'}
        ],
        departmentName:[
          // 不想一离开就校验,这里 失去焦点失去选择数据,所以选择 change
          {required:true,message:'部门不能为空',trigger:'change'}
        ],
        timeOfEntry:[
          {required:true,message:'入职时间',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
      async getDepartments(){
        this.loading = true
        this.showTree = true
        const { depts} = await getDepartments()
        // depts 是一个数组,它需要转化属性结构,才可以被el-tree 所显示
        this.treeData = tranListToTreeData(depts,'')
        this.loading = false
      },
      selectNode(node){
        this.formData.departmentName = node.name
        this.showTree = false
      },
      btnCancel(){
        this.formData = {
          username: '',
          mobile: '',
          formOfEmployment: '',
          workNumber: '',
          departmentName: '',
          timeOfEntry: '',
          correctionTime: ''
        }
        this.$refs.formDataRef.resetFields()
        // this.$parent.dialogVisible = false
        this.$emit('update:dialogVisible',false)
        //可以直接在父组件中使用 sync 修饰符处理
      },
      async btnOk(){
        try {
          await this.$refs.formDataRef.validate()
          //校验成功  调用接口新增
          await addEmployee(this.formData)
          //通知父组件更新数据
          //this.$parent //父组件实例  父组件的实例上有很多方法可以调用
          //调用父组件上的方法,从新获取数据
          this.$parent.getEmployeesList && this.$parent.getEmployeesList()  //如果父组件上有该方法,那么久调用该方法,没有则不执行
          this.$parent.dialogVisible = false
          //这里不用些重制表单数据,因为关闭弹层触发了close 事件, close事件会触发btnCancel方法

        } catch (error) {
          console.log(error)
        }
      }
    }
}
</script>

<style lang="sass" scoped>

</style>